<!DOCTYPE html>
  <head>
    <title>Redis Looker</title>
    <meta charset="utf-8">
    <!--<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">-->
    <link href="{{url_for('static', filename='css/bootstrap-combined.min.css')}}" rel="stylesheet">
    <link href="{{url_for('static', filename='css/redis-looker.css')}}" rel="stylesheet">
    <link href="{{url_for('static', filename='css/jquery.datetimepicker.css')}}" rel="stylesheet">
    <!--<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>-->
    <script type="text/javascript" src="{{url_for('static', filename='js/jquery.min.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static', filename='js/highcharts.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static', filename='js/highcharts-theme.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static', filename='js/jquery.datetimepicker.js')}}"></script>
    <script type="text/javascript" src="{{url_for('static', filename='js/layer/layer.min.js')}}"></script>
  </head>
  <body>
    <div class="container">
        <div>
            <img src="{{url_for('static', filename='images/redis-looker.png')}}"/>
            <!--span class="head_title">Redis Looker</span-->
        </div>

        <div id='dashboard' class='row-fluid'>
          <div class='span12 main'>
            <h2>Dashboard</h2>
            <div class='navbar navbar-inverse navbar_ext'>
              <div class='nav-collapse' style="height: auto;">
                      <ul id="host" class="nav hosts">
                              {% if hosts %}
                                {%for h in hosts%}
                                <li {% if h.active %}class="active"{%endif%}><a href="?hostid={{h.hostid}}" onclick="host_url(this)"">{{h.ip}}:{{h.port}}:{{h.db}}</a></li>
                              {% endfor %}
                  {% endif %}
                    <li>
                        <div style="line-height:40px; height:40px; margin-left:20px;">
                            <a id="addBtn" class="btn btn-inverse" style="margin-top: 0px;padding: 0px 12px;height:38px;line-height: 38px;"><i class="icon-plus icon-white"></i>增加实例</a>
                        </div>
                    </li>
                </ul>
              </div>
            </div>
            <div>
                <ui>
                  <button onclick="period_set(this)" id="period86400" value="86400"  class="btn">24小时</button>
                  <button onclick="period_set(this)" id="period43200" value="43200" class="btn">12小时</button>
                  <button onclick="period_set(this)" id="period21600" value="21600" class="btn">6小时</button>
                  <button onclick="period_set(this)" id="period10800" value="10800" class="btn">3小时</button>
                  <button onclick="period_set(this)" id="period3600" value="3600" class="btn">1小时</button>
                  <button onclick="period_set(this)" id="period600" value="600" class="btn">10分钟</button>
                </ui>
                <input name="stime" style="height:26px;" class="datetimepicker text_center" placeholder="开始时间"/> -
                <input name="etime" style="height:26px;" class="datetimepicker text_center" placeholder="结束时间"/>
                <span style="margin-left:20px;">刷新频率：</span>
                <select name="refresh" class="refresh" onchange="refresh_set(this)">
                {% for op in refresh.option %}
                    {% if op.active %}
                    <option value="{{op.data}}" selected="selected">{{op.key}}</option>
                    {% else %}
                    <option value="{{op.data}}">{{op.key}}</option>
                    {% endif %}
                {% endfor %}
                </select>
            </div>
          </div>
  </div>
        <div id='basic' class='row-fluid content'>
          <div class='span12 main'>
            <h2>BASIC</h2>
             {% if info %}
              <div id="basic-container" style="padding:0 20px;">
                      <p style="margin:15px 0;">
                      <span class="primary"><span style="font-weight: bold;">版本信息：</span>{{ info.redis_version}}</span>
                      <span class="primary"><span style="font-weight: bold;">运行模式：</span>{{info.redis_mode}}</span>
                      <span class="primary"><span style="font-weight: bold;">运行时间：</span>{{info.uptime_in_seconds}}s</span>
                      <span class="primary"><span style="font-weight: bold;">进程ID：</span>{{info.process_id}}</span>
                  </p>
                  <p style="margin:15px 0;">
                  <span class="primary"><span style="font-weight: bold;">当前角色：</span>{{info.role}}</span>
                  <span class="primary"><span style="font-weight: bold;">slave数：</span>{{info.connected_slaves}}</span>
                  {% if info.connected_slaves != 0 %}
                  <span class="primary2"><span style="font-weight: bold;">slaves：</span></span>
                  {% endif %}
                  </p>
          </div>
          {% endif %}
          </div>
        </div>

        <div id='cpu' class='row-fluid content'>
          <div class='span12 main'>
            <h2>CPU</h2>
            <div id="cpu-container"></div>
          </div>
        </div>
        <div id='memory' class='row-fluid content'>
          <div class='span12 main'>
            <h2>Memory</h2>
              <div id="memory-container" style="min-width:800px;height:400px"></div>
          </div>
        </div>
        <div id='keys' class='row-fluid content'>
          <div class='span12 main'>
            <h2>命中率</h2>
              <div id="keys-container" style="min-width:800px;height:400px"></div>
          </div>
        </div>
        <div id='connections' class='row-fluid content'>
          <div class='span12 main'>
            <h2>连接数</h2>
              <div id="connections-container" style="min-width:800px;height:400px"></div>
          </div>
        </div>
    </div>

    <div id="footer">Copyright © 2014 - 2015 Redis-looker, All Rights Reserved. </div>

    <div id="addForm" class="addForm">
        <div><span class="form_label">Host</span><input type="text" name="host" placeholder="必填"></div>
        <div><span class="form_label">Port</span><input type="text" name="port" placeholder="必填"></div>
        <div class="div_passwd"><span class="form_label">Password</span><input type="password" name="passwd" placeholder="选填"></div>
        <div><input id="close" type="button" class="btn" value="取消">&nbsp;&nbsp;<input id="submit" type="button" class="btn" value="确定"></div>
    </div>

    <script>
        function url_set(parameter, value){
                var now_url = window.location.href;
                var now_url_end = now_url[now_url.length - 1];
                var match_key = "=[a-z 0-9]+";
                var new_url = '';
                var url_parameter = parameter + "=" + value;
                var parameter_exist = now_url.match(parameter + match_key);
                 if (now_url_end == "/"){
                         new_url = now_url + "?" + url_parameter;
                 }
                 else{
                         new_url = now_url + "&" + url_parameter;
                 }
                 if (parameter_exist != null){
                         new_url = now_url.replace(parameter_exist[0], url_parameter);
                 }
                 return new_url;
                        
                 }
        function url_del(parameter){
            var now_url = window.location.href;
            var match_key = "=[a-z 0-9]+";
            matchd = now_url.match(parameter + match_key);
            if (matchd != null){
                now_url = now_url.replace(matchd[0], "");
            }
            end_str = now_url[now_url.length - 1];
            if (end_str == "?"){
                now_url = now_url.replace("?", "");
            }
            return now_url;    
        }

        function go_url(url){
                if (window.location.href != url){
                        window.location.href = url;
                        }
        }

        function period_set(obj){
                var url = url_set("period", obj.value);
                go_url(url);
                
        }

          function period_active(){
                    var key="#period"
                    var url = window.location.href;
                    var used = url.match("period=([0-9]+)");
                    if (used != null){
                          p = used[1];
                          var obj = $(key+p);
                          if (obj != null){
                                  obj.attr("class", "btn btn-primary");
                          }
                  }
                  else{
                          $("#period600").attr("class", "btn btn-primary");
                  }
            }

            function stime_set(obj){
                    //var dateobj = new Date(obj.value);
                    var now_time = obj.dateFormat("YmdHi");
                    var url = url_set("stime", now_time);
                    go_url(url);
                    
             }

             function host_url(obj){
                     var hostid = obj.href.match("hostid=([0-9]+)")[1]
                     var url = url_set("hostid", hostid);
                     obj.href = url;
                //go_url(url);
            }
            //refresh event setting
            function refresh_set(obj){
                if (obj.value == "None"){
                     var newurl = url_del("refresh");
                     go_url(newurl);
                 }
                 else{
                     var url = url_set('refresh', obj.value);
                     go_url(url);
                 }
            }

            function item_data_get(itemid){
                    var new_data = '';
                    $.ajax({
                            type: 'GET',
                            async: false,
                            cache: false,
                            dataType: 'JSON',
                            url: '/ajax?itemid=' + itemid,
                            success: function (data){
                                    new_data = data.data;
                            }
                    });
                    return new_data;
            }
                                    
            function chart_upgrade(series, list){
                    for (var i=0;i<series.length;i++){
                            itemid = list[i];
                            data = item_data_get(itemid);
                            if (data){
                                if (series[i].data[series[i].data.length - 1].x != data[0]){
                                        series[i].addPoint(data, true, true);
                                        //alert([series[i].data[series[i].data.length - 1].x, data[0]]);
                            }
                            }
                    }
            }

            function highcharts_add_attr(data){
                    data['legend'] = {enabled: false};
                    data['exporting'] = {enabled: false};
                    data['credits'] = {enabled: false}
                    return data;
            }

            function highchatrs_add_events(data, itemid_array, flush_time){
                    data['chart']['events'] = { load: function (){
                                    var series_num = itemid_array.length;
                                    var series = this.series;
                                    setInterval(function (){
                                            chart_upgrade(series, itemid_array);
                            }, flush_time);}
                    }
                     return data;
            }
                    



          $(function(){
             Highcharts.setOptions({
                         global: {
                           useUTC: false
                                 }
             }); 

          $('input.datetimepicker').datetimepicker({
              allowBlank: true,
              onChangeDateTime:function(ct, $i) {
                      stime_set(ct);
              }
              });


          //graphs setting

          var cpu_itemids = {{graphs.cpu.itemids|safe}};
          var memory_itemids = {{graphs.memory.itemids|safe}};
          var hits_itemids = {{graphs.hits.itemids|safe}};
          var connects_itemids = {{graphs.connects.itemids|safe}};

          {% if refresh.sec %}
           // Rendering charts and add events 
           $("#cpu-container").highcharts(
                highchatrs_add_events(
                highcharts_add_attr(
                {{graphs.cpu.data|safe}}), cpu_itemids, {{refresh.sec}}));
           $("#memory-container").highcharts(
                highchatrs_add_events(
                highcharts_add_attr(
                {{graphs.memory.data|safe}}), memory_itemids, {{refresh.sec}}));

           $("#keys-container").highcharts(
                highchatrs_add_events(
                highcharts_add_attr(
                {{graphs.hits.data|safe}}), hits_itemids, {{refresh.sec}}));
           
           $("#connections-container").highcharts(
                highchatrs_add_events(
                highcharts_add_attr(
                {{graphs.connects.data|safe}}), connects_itemids, {{refresh.sec}}));

           {% else %}
          //data setup
    		  $("#cpu-container").highcharts({{graphs.cpu.data|safe}});
              $("#memory-container").highcharts({{graphs.memory.data|safe}});
              $("#keys-container").highcharts({{graphs.hits.data|safe}});
              $("#connections-container").highcharts({{graphs.connects.data|safe}});

          {% endif %}

          //btn active
          period_active()
          {% if view_time %}
          $("input[name=stime]").val("{{view_time.stime}}");
          $("input[name=etime]").val("{{view_time.etime}}");
          {% endif %}

          



          var addForm;
          $('#addBtn').click(function(){
                addForm = $.layer({
                    type: 1,
                    title: false,
                    area: ['auto', 'auto'],
                    border: [0], //去掉默认边框
//                    shade: [0], //去掉遮罩
                    closeBtn: [0, true], //去掉默认关闭按钮
                    shift: 'left', //从左动画弹出
                    page: {dom : '#addForm'}
                });
          });

          $("#close").click(function(){
//              alert("关闭对话框！");
              layer.close(addForm);
          });

          $("#submit").click(function(){
              var host = $("#addForm input[name='host']").val();
              if(host == '') {
                layer.msg('Host不能为空！', 2, -1);
                  return;
              }
              var port = $("#addForm input[name='port']").val();
              if(port == '') {
                layer.msg('Port不能为空！', 2, -1);
                  return;
              }
              var passwd = $("#addForm input[name='passwd']").val();

              $('<li><a href="#">'+host+':'+port+'</a></li>').insertBefore("ul.hosts li:last");

              layer.close(addForm);

          });

      });
  </script>

  </body>
</html>
